import 'package:flutter/material.dart';

void main() {
  // 1. 运行应用程序。
  runApp(const MaterialApp(home: Main()));
}

// 2. 主应用程序类。
class Main extends StatelessWidget {
  // 3. 构造函数，包含一个关键参数，用于在Widget树中唯一标识这个Widget。
  const Main({super.key});

  // 4. 构建方法，返回一个Widget，该Widget代表应用程序的用户界面。
  @override
  Widget build(BuildContext context) {
    // 5. 返回一个Scaffold，用于定义应用程序的基本布局结构。
    return Scaffold(
      // 6. 设置应用程序的顶部栏，包括标题和背景颜色。
      appBar: AppBar(
        title: const Text(
          '商品订单信息',
          style: TextStyle(color: Colors.white),
        ),
        backgroundColor: Colors.purple,
      ),
      // 7. 设置应用程序的主体内容，包括一个Container和一个Text组件。
      body: Container(
        padding: const EdgeInsets.all(10),
        color: Colors.black12,
        child: GridView(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3, // 3 列
            mainAxisSpacing: 10, // 主轴间距
            crossAxisSpacing: 10, // 侧轴间距
            childAspectRatio: 0.7, // 宽高比
          ),
          children: [
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('1'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('2'),
            ),
            Container(
              color: Colors.green,
              alignment: Alignment.center,
              child: const Text('3'),
            ),
            Container(
              color: Colors.yellow,
              alignment: Alignment.center,
              child: const Text('4'),
            ),
            Container(
              color: Colors.red,
              alignment: Alignment.center,
              child: const Text('5'),
            ),
            Container(
              color: Colors.blue,
              alignment: Alignment.center,
              child: const Text('6'),
            ),
          ],
        ),
      ),
    );
  }
}
